<template>

	<el-container class="contain">
		<el-aside class="left" style="width: 200px;">
			<el-row style="padding: 10px;">
				<el-col :span="10" style="padding-top: 3px;">
				<span >二级分类：</span>
				</el-col>
				<el-col :span="14">
					<div class="secondTypeSelect">
        <el-select
					:popper-append-to-body="false"
					v-model="name"
					size="mini"
					v-on:change="changevalue"
					placeholder="全部"
					style="height: 20px;padding: 0px;">
          <el-option v-for="item in secondType"
										 :key="item.name"
										 :value="item.name"
					>{{item.name}}</el-option>
        </el-select>
					</div>
				</el-col>
			</el-row>

			<el-row style="padding-bottom: 5px;">
				<el-input
					placeholder="请输入设备名称"
					v-model="filterText"
					size="small"
					style="height: 30px;border-radius: 10px;margin-bottom: 10px;"
				>
				</el-input>
			</el-row>
			<el-row>
				<el-tree
					class="filter-tree"
					:data="data"
					:props="defaultProps"
					:highlight-current="true"
					default-expand-all
					:filter-node-method="filterNode"
					style="background-color: transparent;"
					ref="tree">
				</el-tree>
			</el-row>
		</el-aside>
		<el-main class="main">
				<el-row >
					<el-col :span="4" >
						<i class="el-icon-s-order" style="color: #82B2FF;margin-right: 5px; font-size: 18px; "></i><span style="color: #82B2FF; font-weight:bold;">设备管理</span>
					</el-col>
						<el-col :span="3" offset="12">
							<el-button type="warning" size="mini" style="margin-left: 30px;font-size: 10px;" @click="removeBatch(multipleSelection)" :disabled="this.multipleSelection.length === 0||this.disabled">批量删除</el-button>
						</el-col>
						<el-col :span="2" >
							<el-button type="primary" size="mini" @click="addDevice">+添加设备</el-button>
						</el-col>
						<el-col :span="3" >
							<el-button type="primary" size="mini"  style="margin-left: 15px;">下载导入模板</el-button>
						</el-col>
				</el-row>
			  <el-row>
					<el-divider></el-divider>
					<el-table
						ref="multipleTable"
						:data="tableData"
						tooltip-effect="dark"
						:row-style="{height:'20px'}"
						:cell-style="{padding:'0px'}"
						height="450"
						style="font-size: 10px;margin-top: -20px; text-align: center;"
						:fit="false"
						size="mini"
						show-overflow-tooltip="true"
						@selection-change="handleSelectionChange">
						<el-table-column
							type="selection"
							width="50">
						</el-table-column>
						<el-table-column
							label="序号"
							width="50"
							type="index"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="manageName"
							label="名称"
							width="100"
						  :show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="channelName"
							label="通道名称"
							width="100"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="organization"
							label="组织机构"
							width="80"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="oneType"
							label="一级分类"
							width="80"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="twoType"
							label="二级分类"
							width="80"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="model"
							label="模型"
							width="50"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="order"
							label="显示顺序"
							width="80"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="status"
							label="状态"
							width="50"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							prop="Collecting"
							label="是否采集设备"
							width="100"
							:show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
							label="操作"
							width="210"
						>
							<template slot-scope="scope">
								<el-button
									size="mini"
									type="primary"
									@click="handleSee(scope.$index, scope.row)">查看</el-button>
								<el-button
									size="mini"
									type="danger"
									@click="handleEdit(scope.$index, scope.row)">修改</el-button>
								<el-button
									size="mini"
									type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-row>
				<el-row>
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[5, 10, 20]"
						:page-size="pageSize"
						:pager-count="5"
						layout="total, prev, pager, next,sizes"
						:total="totalPage">
					</el-pagination>
				</el-row>
<!--			添加设备弹出框-->
			<el-dialog title="设备表单" :center="true" :visible.sync="addDeviceDialogVisible">
				<el-form :model="form">
					<el-form-item label="设备名称" :label-width="formLabelWidth">
						<el-input v-model="form.manageName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="通道名称" :label-width="formLabelWidth">
						<el-input v-model="form.channelName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="组织机构" :label-width="formLabelWidth">
						<el-select v-model="form.organization" placeholder="请选择组织机构">
							<el-option label="山冶智信1" value="山冶智信1"></el-option>
							<el-option label="山冶智信2" value="山冶智信2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="一级分类" :label-width="formLabelWidth">
						<el-select v-model="form.oneType" placeholder="请选择一级分类">
							<el-option label="仪表" value="shanghai"></el-option>
							<el-option label="测量" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="二级分类" :label-width="formLabelWidth">
						<el-select v-model="form.twoType" placeholder="请选择二级分类">
							<el-option label="水表" value="水表"></el-option>
							<el-option label="电表" value="电表"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模型" :label-width="formLabelWidth">
						<el-input v-model="form.model" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="显示顺序" :label-width="formLabelWidth">
						<el-input v-model="form.order" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" :label-width="formLabelWidth">
						<el-select v-model="form.status" placeholder="请选择状态">
							<el-option label="启用" value="启用"></el-option>
							<el-option label="未启用" value="未启用"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="是否采集设备" :label-width="formLabelWidth">
						<el-select v-model="form.Collecting" placeholder="请选择状态">
							<el-option label="是" value="是"></el-option>
							<el-option label="否" value="否"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
				</div>
			</el-dialog>
		</el-main>
	</el-container>

</template>

<script>
export default {
	name: "deviceManage",
	data() {
		return {
			dialogTableVisible: false,
			// 添加设备弹出框设备是否开启
			addDeviceDialogVisible: false,
			//添加弹出框样式
			formLabelWidth: '120px',
			//输入设备筛选变量
			filterText: '',
			//当前页
			currentPage: 1,
			pageSize: 5,
			//总共页数
			totalPage: 50,
			//二次分类下拉参数
      secondType: [
        {
          indexId: 1,
          name: '康派智能'
        },
        {
          indexId: 2,
          name: '制造中心'
        },
        {
          indexId: 3,
          name: '技术工程部'
        },
        {
          indexId: 4,
          name: '研发部'
        },
        {
          indexId: 5,
          name: '综合管理部'
        },
      ],
			//树形控件展示数据
			data: [{
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
					children: [{
						id: 9,
						label: '三级 1-1-1'
					}, {
						id: 10,
						label: '三级 1-1-2'
					}]
				}]
			}, {
				id: 2,
				label: '一级 2',
				children: [{
					id: 5,
					label: '二级 2-1'
				}, {
					id: 6,
					label: '二级 2-2'
				}]
			}, {
				id: 3,
				label: '一级 3',
				children: [{
					id: 7,
					label: '二级 3-1'
				}, {
					id: 8,
					label: '二级 3-2'
				}]
			}],
			defaultProps: {
				children: 'children',
				label: 'label'
			},

			// 添加设备弹窗
		form:{
			manageId: '',
			manageName: '',
			channelName: '',
			organization: '',
			oneType: '',
			twoType: '',
			model: '',
			order: '1',
			status: '',
			Collecting: '',
		},
			//右侧表格数据默认值
			tableData: [{
				manageId: '',
				manageName: '王小虎',
				channelName: '会议室集中器',
				organization: '山冶智信',
				oneType: '仪表',
				twoType: '水表',
				model: '我是水表',
				order: 1,
				status: '启用',
				Collecting: '是',
			}, {
				manageId: '',
				manageName: '王小虎',
				channelName: '会议室集中器',
				organization: '山冶智信',
				oneType: '仪表',
				twoType: '水表',
				model: '我是水表',
				order: 1,
				status: '启用',
				Collecting: '是',
			}, {
				manageId: '',
				manageName: '王小虎',
				channelName: '会议室集中器',
				organization: '山冶智信',
				oneType: '仪表',
				twoType: '水表',
				model: '我是水表',
				order: 1,
				status: '启用',
				Collecting: '是',
			}, {
				manageId: '',
				manageName: '王小虎',
				channelName: '会议室集中器',
				organization: '山冶智信',
				oneType: '仪表',
				twoType: '水表',
				model: '我是水表',
				order: 1,
				status: '启用',
				Collecting: '是',
			}, {
				manageId: '',
				manageName: '王小虎',
				channelName: '会议室集中器',
				organization: '山冶智信',
				oneType: '仪表',
				twoType: '水表',
				model: '我是水表',
				order: 1,
				status: '启用',
				Collecting: '是',
			}],
			multipleSelection: [],
			disabled:true,

		};
	},
	// 监视input输入筛选框
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	methods: {
		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		// 左侧边栏下拉框筛选
    changevalue(){
      alert(this.name);
			if (this.name != '全部'){
				this.filterText=this.name
			}
    },
		// 点击查看功能
		handleSee(index, row) {
			console.log(index, row);
		},
		// 点击修改功能
		handleEdit(index, row) {
			console.log(index, row);
			this.form=row;
			this.addDeviceDialogVisible=true;
		},
		//点击删除功能
		handleDelete(index, row) {
			console.log(index, row);
		},
		// 每页有多少条
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		//当前处于第几页
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
		},
		//多选框选择
		handleSelectionChange(val) {
			this.multipleSelection = val
			if (val.length !=0){
				this.disabled=false;
			}

			console.log("复选框选中内容");
			console.log(this.multipleSelection)
		},
		//批量删除
		removeBatch(val){
			var ids=[];
			val.forEach(element =>{
				ids.push(element.manageName)
			})
			alert(ids);
			console.log("批量删除"+ids)
		},
		//添加设备按钮
		addDevice(){
			this.addDeviceDialogVisible=true;
		}
	},

}
</script>

<style scoped>
	.left{

		background-color: transparent;
	}

  .contain{
    width: 1193px;
    height: 600px;
  }

	.main{
		width: 800px;
		height: 600px;
		background-color: White;
		margin-left: 10px;
		border-radius: 20px;
	}

</style>
